<template>
  <div class="hot-albums-wrap">
    <div class="title fpbc">
      <span>Ta的其他热门专辑</span>
      <span class="all cur_p td_u" @click="goArtistAlbumPage">全部 ></span>
    </div>
    <div class="albums" v-loading="loading">
      <div class="item fsc" v-for="item in albums" :key="item.id">
        <img class="cur_p" :src="item.picUrl" :title="item.name" @click="goAlbumPage(item.id)" />
        <div class="right">
          <div
            class="name cur_p td_u"
            :title="item.name"
            @click="goAlbumPage(item.id)"
          >{{ item.name }}</div>
          <div class="time">{{ timeFormat(item.publishTime) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { useRouter } from 'vue-router'
import { AlbumType } from '../../types/types'
import { timeFormat } from '../../utils'

const router = useRouter()

const props = defineProps({
  albums: {
    type: Array as PropType<AlbumType[]>
  },
  loading: {
    type: Boolean,
    default: false
  },
  goAlbumPage: {
    type: Function as PropType<(id: number) => void>,
    required: true
  },
  goArtistAlbumPage: {
    type: Function as PropType<() => void>,
    required: true
  }
})

</script>

<style lang="scss" scoped>
.hot-albums-wrap {
  min-height: 94px;
}
.title {
  line-height: 24px;
  height: 24px;
  font-size: 12px;
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;

  .all {
    font-size: 12px;
    color: #666;
    font-weight: 400;
  }
}

.albums {
  min-height: 50px;
  .item {
    width: 270px;
    margin-bottom: 15px;
    img {
      width: 50px;
      height: 50px;
    }
    .right {
      margin-left: 10px;

      .name,
      .time {
        width: 140px;
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>